<style lang="less" scoped src="./charge.less"></style>
<script src="./charge.js"></script>

<template>
    <div>
        <Row style="font-size: 15px;">
            <Col span="22">
            套餐名称：<Input v-model="query.name" clearable style="width: 15%"></Input>
            费用类型：<Select v-model="query.cost" style="width:8%" clearable>
                        <Option v-for="item in chargeTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModal"
                :title="(formData.id ? '修改': '新增') + '套餐'"
                @on-ok="viewModa = false"
                @on-cancel="viewModal = false"
                :mask-closable="false"
                width="50%">
            <Form :model="formData" :label-width="90">
                <FormItem label="套餐名称">
                    <Input v-model="formData.name" clearable></Input>
                </FormItem>
                <FormItem label="费用类型">
                    <Select v-model="formData.cost" filterable clearable>
                        <Option v-for="item in chargeTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <Row>
                    <Col span="12">
                    <FormItem label="免费主题数">
                        <InputNumber v-model="formData.themesun"
                                     :min="0"
                                     :precision="0"
                                     style="width: 100%"
                        ></InputNumber>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="免费奖状数">
                        <InputNumber v-model="formData.freediploma"
                                     :min="0"
                                     :precision="0"
                                     style="width: 100%"
                        ></InputNumber>
                    </FormItem>
                    </Col>
                </Row>
                <!--<Row>-->
                    <!--<Col span="12">-->
                    <!--<FormItem label="主题费用">-->
                        <!--<InputNumber v-model="formData.themecost"-->
                                     <!--:min="0"-->
                                     <!--:precision="2"-->
                                     <!--style="width: 100%"-->
                        <!--&gt;</InputNumber>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                    <!--<Col span="12">-->
                    <!--<FormItem label="奖状费用">-->
                        <!--<InputNumber v-model="formData.diplomacost"-->
                               <!--:min="0"-->
                               <!--:precision="2"-->
                               <!--style="width: 100%"-->
                        <!--&gt;</InputNumber>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row>-->
                    <!--<Col span="12">-->
                    <!--<FormItem label="下载数量">-->
                        <!--<InputNumber v-model="formData.teenagersun"-->
                                     <!--:min="0"-->
                                     <!--:precision="0"-->
                                     <!--style="width: 100%"-->
                        <!--&gt;</InputNumber>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                    <!--<Col span="12">-->
                    <!--<FormItem label="下载收费标准">-->
                        <!--<InputNumber v-model="formData.rates"-->
                                     <!--:min="0"-->
                                     <!--:precision="2"-->
                                     <!--style="width: 100%"-->
                        <!--&gt;</InputNumber>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                <!--</Row>-->
            </Form>
            <div slot="footer">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="viewModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>